import React from "react";
import moment from 'moment';
export default function NewsItem(props) {
  //打印 props
  let { data } = props;
  //获取当前数据 图片的数量
  let len = data.images.length;
  return (
    <div>
      {/* 四张图的情况 */}
      {len === 4 && (
        <div className="news-item">
          <h3>{data.title}</h3>
          <div className="images-list">
            {data.images.map((item, index) => {
              return <div key={index} className="img-item" style={{backgroundImage: `url(${item})`}}>
                    </div>
            })}
            
          </div>
          <div className="info">
            <span>{data.author}</span>
            &nbsp;&nbsp;
            <span>{moment(data.date).format('YYYY-MM-DD HH:mm:ss')}</span>
          </div>
        </div>
      )}

      {/* 一张图的情况 */}
      {len === 1 && <div className="news-item">
        <div className="left">
          <h3>{data.title}</h3>
          <div className="info">
            <span>{data.author}</span>
            &nbsp;&nbsp;
            <span>{moment(data.date).format('YYYY-MM-DD HH:mm:ss')}</span>
          </div>
        </div>
        <div className="right">
          <img
            width="100%"
            src={data.images[0]}
            alt=""
          />
        </div>
      </div>}

      {/* 无图的情况 */}
      {len === 0 && <div className="news-item">
        <h3>
        {data.title}
        </h3>
        <div className="info">
          <span>{data.author}</span>
          &nbsp;&nbsp;
          <span>{moment(data.date).format('YYYY-MM-DD HH:mm:ss')}</span>
        </div>
      </div>}
      
    </div>
  );
}
